document.onreadystatechange = function () {
    if(document.readyState === "complete"){
        $(".loading").fadeOut();
    }
}

$(function() {
    // 折叠按钮
    const burgerEl = document.querySelector('.burger');
    const headerEl = document.querySelector('.nav');
    burgerEl.addEventListener('click',()=>{
        headerEl.classList.toggle('open')
    })

    var flag = true;
    // 手机navIcon 弹出nav导航栏
    $(".phoneicon").click(function() {
        if (flag === true) {
            $(".nav-list").show();
            flag = false;
        } else {
            $(".nav-list").hide();
            flag = true;
        }

    });
    //第3屏幕3D动画效果
    //获取方向->获取进出->添加类名
    var oLi = Array.prototype.slice.call($('.skill-list li'));
    // console.log(oLi);
    //初始化
    //获取li位置信息，宽高

    //将li转换成数组
    oLi.forEach(function(ele, index) {
        ele.spec = update(ele);
        ele.addEventListener('mouseenter', function(e) {
            addClass(this, e, 'in');
        })
        ele.addEventListener('mouseleave', function(e) {
            addClass(this, e, 'out');
        });
    });

    function update(ele) {
        return {
            w: ele.offsetWidth,
            h: ele.offsetHeight
        }
    };

    function getDirection(ele, e) {
        var w = ele.spec.w,
            h = ele.spec.h;
        var x = e.offsetX - w / 2;
        var y = e.offsetY - h / 2;
        // console.log(x);
        // console.log(y);
        // 取到x,y两点的坐标
        return d = (Math.round(((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;
        console.log(d);
        //d的数值用于判断方向上下左右。

    };

    function addClass(ele, e, state) {
        //获取进入的方向
        var direction = getDirection(ele, e);
        var d = '';
        switch (direction) {
            case 0:
                d = '-top';
                break;
            case 1:
                d = '-right';
                break;
            case 2:
                d = '-bottom';
                break;
            case 3:
                d = '-left';
        }
        ele.className = state + d;
    };
    // 第四屏幕js动效 
    var numlist = $(".demo-icon a"),
        oitems = $(".demo .demo_item"),
        oitemsLength = oitems.length,
        numLength = numlist.length,
        index = 0;
        console.log(numlist);
        console.log(oitems);
    function goIndex(){
        for(var i = 0;i<oitemsLength;i++){
            oitems[i].className="demo_item";
            numlist[i].className="demo-num";
        }
        oitems[index].className="demo_item active";
        numlist[index].className="demo-num active";
    }

    for(var i = 0;i<numLength;i++){
        numlist[i].onclick=function(){
            var numIndex = this.getAttribute('data-index');
            index = numIndex;
            console.log(index);
            goIndex();
        }
    }
    // 手机端第四屏动效
    var myswiper = new Swiper('.swiper-container', {
        effect: 'cube',
        grabCursor: true,
        cubeEffect: {
          shadow: true,
          slideShadows: true,
          shadowOffset: 20,
          shadowScale: 0.94,
        }
    });


    $("#fullpage").fullpage({
        anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage','fivePage', 'lastPage'], //定义锚链接
        menu: '#myMenu', //绑定导航栏菜单
        navigation: true,
        onLeave: function(origin, destination, direction) {
            $(".contact-title,.contact-icon").css("opacity", 0);
            $(".contact-text").css("opacity", 0);
            if (destination.index === 5) {
                $('.contact-title').animate({ "opacity": 1 }, 1000, function() { 
                    $(".contact-text").animate({ "opacity": 1 }, 1000, function () {
                         $(".contact-icon").animate({ "opacity": 1 }, 1000);
                        
                    });
                });
            }
        }
    });
   
    // 音乐播放器
    const musicContainer = document.getElementById('music-container');
    const playBtn = document.getElementById('play');
    const prevBtn = document.getElementById('prev');
    const nextBtn = document.getElementById('next');

    const audio = document.getElementById('audio');
    const progress = document.getElementById('progress');
    const progressContainer = document.getElementById('progress-container');
    const musicTitle = document.getElementById('music-title');
    const cover = document.getElementById('cover');


     // Change song
    prevBtn.addEventListener('click', prevSong);
    nextBtn.addEventListener('click', nextSong);

    // Time/song update
    audio.addEventListener('timeupdate', updateProgress);

    // Click on progress bar
    progressContainer.addEventListener('click', setProgress);

    // Song ends
    audio.addEventListener('ended', nextSong);


    // Song titles
    const songs = ['qianxun', 'summer', 'starry-sky'];

    // Keep track of song
    let songIndex = 1;

    // Initially load song details into Dom
    loadSong(songs[songIndex]);

    // Update song details
    function loadSong(song) {
        musicTitle.innerHTML = song;
        audio.src = `music/${song}.mp3`;
        cover.src = `images/${song}.jpg`;
    }

    // Play song
    function playSong() {
        musicContainer.classList.add('play');
        playBtn.querySelector('i.iconfont').classList.remove('icon-qp_icon_play');
        playBtn.querySelector('i.iconfont').classList.add('icon-qp_icon_pause');

        audio.play();
    }

    // Pause song
    function pauseSong() {
        musicContainer.classList.remove('play');
        playBtn.querySelector('i.iconfont').classList.add('icon-qp_icon_play');
        playBtn.querySelector('i.iconfont').classList.remove('icon-qp_icon_pause');

        audio.pause();
    }

    // Previous song
    function prevSong() {
        songIndex--;
        if (songIndex < 0) {
            songIndex = songs.length - 1;
        }

        loadSong(songs[songIndex]);
        playSong();
    }

    // Next song
    function nextSong() {
        songIndex++;
        if (songIndex > songs.length - 1) {
            songIndex = 0;
        }
        loadSong(songs[songIndex]);
        playSong();
    }

    // Update progress bar
    function updateProgress(e) {
        const { duration, currentTime } = e.srcElement;
        const progressPercent = (currentTime / duration) * 100;
        progress.style.width = `${progressPercent}%`;
    }

    // Set progress bar
    function setProgress(e) {
        const width = this.clientWidth;
        const clickX = e.offsetX;
        const duration = audio.duration;

        audio.currentTime = (clickX / width) * duration;
    }

    // Event listeners
    playBtn.addEventListener('click', () => {
        const isPlaying = musicContainer.classList.contains('play');

        if (isPlaying) {
            pauseSong();
        } else {
            playSong();
        }
    })
});

